<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- scrollReveal -->
    <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
 
  <style>
      div{
          
          margin-top: 500px;
      }
  </style>
</head>
<body>
    <div class="d1">hello,world!</div>
    <div class="d1">hello,world!</div>
    <div class="d1">hello,world!</div>
    <div class="d1">hello,world!</div>
   
    <div class="d1">hello,world!</div>

    <div class="d1">hello,world!</div>

    <script>
        // 1).设置动画配置信息
    var config = {
                 reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
                origin: 'bottom', // 动画开始的方向
                distance: '300px',//移动距离
                duration: 1000, // 动画持续时间
                delay: 0, // 延迟
                rotate: { x: 0, y: 0, z: 0 }, // 过度到0的初始角度，关键点想要酷炫的样式主要修改此参数
                container: document.documentElement,
                opacity: 0, // 初始透明度
                scale: 0.8,
                viewFactor: 100,//视角，可拉长看到的距离
                viewOffset: {//可看到的范围，全屏往里缩
                    top: 150,
                    right: 0,
                    bottom: 150,
                    left: 0
                },
            // 回调函数
            //当动画开始之前会被触发
            beforeReveal: function(domEl){
                console.log('动画执行了');
            },
            //鼠标滚轮滚动之前会被触发
            beforeReset: function(domEl){
                console.log('滚轮开始---');
            },
            //动画开始之后会被触发
            afterReveal: function(domEl){
                console.log('动画结束了');
            },
            //滚轮滚动之后会被触发
            afterReset: function(domEl){
                console.log('滚轮结束了');
            }
        };
        
    // 2).然后实例化一个scrollReveal对象
    window.sr = ScrollReveal();
    
    // 3).再调用scrollReveal里的reveal方法将scrollReveal内部的动画和css中的标签关联起来
    sr.reveal('.d1',config);
    //参数一：跟html标签关联的类名
    //参数二：动画配置
    
       </script>
</body>
</html>